import React from 'react';
import ReactDOM from 'react-dom';
import { Breadcrumb, Button, Form, Select, Input, Pagination, Row, Col, Popover, Card, Modal, Message, Icon } from 'antd';
const FormItem = Form.Item;
const Option = Select.Option;

let Recover = React.createClass({

  contextTypes: {
    router: React.PropTypes.object
  },

  getInitialState() {
    return {
      data: [],
      visibleList: {},
      dataBox: null,
      tenementId: '',
        total: 0,
        currentPage: 1,
        pageSize: 12
    }
  },


  componentDidMount() {
    this.handleSearch();
  },

  fetch(param) {

    let params = Object.assign({}, {pageSize: this.state.pageSize, currentPage: 1}, param);
    let _me = this
    console.log('params', params)
    Utils.sendAjax({
      url: '/tenement/recycle/list',
      data: JSON.stringify(params),
      type: 'json',
      callback: function (result) {
        if (result.code == '200') {
          _me.setState({
            data: result.data,
            dataBox: _me.renderBox(result.data),
              total: result.page.total,

          })
        } else {
          Message.error(result.message, 10)
        }
      }
    })
  },


  renderBox(data) {
    if (!data[0]) {
      return (
        <li className="none-data">
          <span><Icon type="frown"/>暂无数据...</span>
        </li>
      )
    }
    const formItemLayout = {
      labelCol: {span: 6},
      wrapperCol: {span: 14},
    };
    const { getFieldProps } = this.props.form;
    let boxArr = [];
    data.forEach((item) => {

      let content = (
        <Form horizontal className="form-wrap-li" form={this.props.form}>
          <FormItem {...formItemLayout}
            label="业主姓名">
            <p className="ant-form-text">{item.ownerName}</p>
          </FormItem>
          <FormItem {...formItemLayout}
            label="房屋地址">
            <p className="ant-form-text">{item.address}</p>
          </FormItem>
          <FormItem {...formItemLayout}
            label="物业名称">
            <p className="ant-form-text">{item.tenementName}</p>
          </FormItem>
          <FormItem {...formItemLayout}
            label="联系电话">
            <p className="ant-form-text">{item.mobilePhone}</p>
          </FormItem>
          <FormItem {...formItemLayout}
            label="装修类型">
            <p className="ant-form-text">{item.decorateStr}</p>
          </FormItem>
          <FormItem {...formItemLayout}
            label="房屋面积">
            <p className="ant-form-text">{item.area}平方米</p>
          </FormItem>
          <FormItem {...formItemLayout}
            label="房屋租金">
            <p className="ant-form-text">{item.rent}元/月</p>
          </FormItem>
          <FormItem {...formItemLayout}
            label="起租日期">
            <p className="ant-form-text">{item.leaseInception}</p>
          </FormItem>
          <FormItem {...formItemLayout}
            label="租赁期限">
            <p className="ant-form-text">{item.period}个月</p>
          </FormItem>
        </Form>
      );
      let boxDom = (
        <li className="ul-wrap-li" key={`li-${item.tenementId}`}>
          <Popover placement="right" title="房源信息" content={content} trigger="hover"
          >
            <Card>
              <p>
                <span className="li-name">{item.ownerName}</span>
                <span className="delete-span"><i className="return"
                                                 onClick={this.handleRent.bind(this, item.tenementId)}></i></span>
              </p>
              <p><strong>￥{item.rent}</strong></p>
              <p>地址：{item.address}</p>
            </Card>
          </Popover>
        </li>
      )
      boxArr.push(boxDom)
    })
    return boxArr;
  },

  //点击"返回"
  handleRent(id){
    let param = {tenementId: id}
    console.log('点击了返回')
    Utils.sendAjax({
      url: '/tenement/recycle/renew',
      data: JSON.stringify(param),
      callback: (result) => {
        if (result.code === '200') {
          let goPathUrl = '/landlord/rentBeforeIndex/list'
          this.context.router.push(goPathUrl);
        } else {
          Message.error(result.message, 10)
        }
      }
    });
  },


  handleSearch() {
    this.listRender(1)
  },

  //分页
  handlePageChange(current) {
  this.listRender(current)
  },
  listRender(current){
    let forms = this.props.form.getFieldsValue();
    let param = Object.assign({}, forms, {currentPage:current});
    this.setState({
      currentPage:current
    });
    this.fetch(param);
  },
  handleReset() {
    this.props.form.resetFields();
  },

  render () {

    const { getFieldProps } = this.props.form;

    return (
      <div>

          <div className="search-bar">
            <Form inline>
              <FormItem label="房屋地址">
                <Input {...getFieldProps('address')} placeholder="房屋地址"/>
              </FormItem>
              <FormItem>
                <Button type="primary" onClick={this.handleSearch} style={{marginRight: 20}}>查询</Button>
                <Button type="default" onClick={this.handleReset}>重置</Button>
              </FormItem>
            </Form>
          </div>
          <ul className="ul-show-card">
            {this.state.dataBox}
          </ul>
        {this.state.data[0] ?
        <div className="box-page">
            <Pagination onChange={this.handlePageChange}
                        current={this.state.currentPage} total={this.state.total}
                        pageSize={this.state.pageSize}/>
          </div> : null }
        
      </div>
    );
  }
});

Recover = Form.create()(Recover);
export default Recover